<!-- 分页 -->
<template>
  <div class="pagination">
    <el-pagination @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="seedPage"
                   :page-sizes="[10, 20, 50, 100]"
                   :page-size="seedLimit"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="seedTotal">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data () {
    return {}
  },
  props: ['seedTotal', 'seedPage', 'seedLimit'], // 获取父组件传的值,在 props 中添加了元素之后，就不需要在 data 中再添加变量了,只限读

  // 方法
  methods: {
    // 每页显示条数发生改变触发
    handleSizeChange (val) {
      //   this.seedLimit = val;
      this.$emit('pagingLimit', this.seedPage, val) // 自定义事件,将值传父组件
    },
    // 当前页数发生改变触发
    handleCurrentChange (val) {
      //   this.seedPage = val;
      this.$emit('pagingPage', val, this.seedLimit)
    }
  }
}
</script>

<style lang='less' scoped>
.pagination {
  margin-top: 5px;
}
</style>
